<template>
    <div class="comment_container">
        <h3>发表评论</h3>
        <hr>
        <textarea placeholder="请输入要BB的内容（最多120个字）" maxlength="120" v-model="msg"></textarea>
        <!-- 发表评论 -->
        <mt-button type="primary" size="large" @click="postComment">发表评论</mt-button>
        <!-- 评论楼层 -->
        <div class="floor">
            <!-- 循环列表 begin -->
            <div class="floor_list" v-for="( item,i ) in commentsList" :key="item.add_time">
                <p>
                    <span>第{{ i+1 }}楼</span>
                    <span>用户：{{ item.user_name }}</span>
                    <span>发表时间：{{ item.add_time | dateFormat }} </span>
                </p>
                <div>{{ (item.content === 'undefined') || (item.content === '') ? '此用户很懒，麻都没说' : item.content }}</div>
            </div>
            <!-- 循环列表 begin -->
        </div>
        <!-- 加载更多 -->
        <mt-button plain size="large" @click="getMore">加载更多</mt-button>
    </div>
</template>

<script>
import { Toast } from "mint-ui";
export default {
    data() {
        return {
            pageindex: 1,
            commentsList: [],
            msg: ""
        };
    },
    created() {
        this.getComments();
    },
    methods: {
        getComments() {
            this.$http
                .get(
                    "api/getcomments/" +
                        this.id +
                        "?pageindex=" +
                        this.pageindex
                )
                .then(function(data) {
                    if (data.body.status === 0) {
                        this.commentsList = this.commentsList.concat(
                            data.body.message
                        );
                    } else {
                        Toast("获取评论失败！");
                    }
                });
        },
        postComment() {
            if (this.msg.trim().length === 0) {
                Toast("请输入评论内容！");
                return false;
            }
            this.$http
                .post("api/postcomment/" + this.$route.params.id, {
                    content: this.msg.trim()
                })
                .then(result => {
                    if (result.body.status === 0) {
                        var cmt = {
                            user_name: "匿名用户",
                            add_time: Date.now(),
                            content: this.msg
                        };
                        this.msg = "";
                        this.commentsList.unshift(cmt);
                        Toast(result.body.message);
                    }
                });
        },
        getMore() {
            this.pageindex++;
            this.getComments();
        }
    },
    props: ["id"]
};
</script>

<style lang="scss">
.comment_container {
    padding: 0 4px;
    h3 {
        font-size: 14px;
    }
    textarea {
        margin: 0;
        font-size: 12px;
        height: 80px;
    }
    .floor {
        padding: 10px 0;
        background-color: #f1f1f1;
        .floor_list {
            padding-bottom: 10px;
        }
        p {
            background-color: #aeaeae;
            color: #000;
            font-size: 10px;
            display: flex;
            justify-content: space-around;
        }
        .floor_list {
            div {
                text-indent: 20px;
            }
        }
        div {
            font-size: 14px;
        }
    }
}
</style>
